<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垃圾分类网站管理平台</title>
		<link rel="stylesheet" href="../CSS/WebsiteManagementInterface.css" />
		<script src="../JS/WebsiteManagementInterface_js.js"></script>
	</head>
	<body>
		<div class="formDiv">
			<span class="formSpan">
				<h2>添加信息操作</h2>
				<form action="" method="post">
					<div class="input-container">
						<label for="">用户id</label>
						<input type="text" name="请输入你要处理的垃圾类型" class="input-field" />
					</div>
					<div class="input-container">
						<label for="username">用户名:</label>
						<input type="text" name="请输入操作的用户的用户名:" class="input-field" />
					</div>
					<div>
						<label for="tratch">你要处理掉的垃圾类型:</label>
						<select name="请选择你要处理的垃圾类型">
							<option value="湿垃圾">湿垃圾</option>
							<option value="干垃圾">干垃圾</option>
							<option value="可回收垃圾">可回收垃圾</option>
							<option value="不可回收垃圾">不可回收垃圾</option>
							<option value="有害垃圾">有害垃圾</option>
							<option value="无公害垃圾">无公害垃圾</option>
						</select>
					</div>
					<div class="button-container">
						<button type="submit" class="button" onclick="a">提交</button>
					</div>
					<div class="button-container">
						<button type="reset" class="button">重置</button>
					</div>
				</form>
			</span>
			<span class="formSpan">
				<h2>信息查询操作</h2>
				<form action="" method="post">
					<div class="input-container">
						<label for="" class="label">你要查找的用户id:</label>
						<input type="number" name="请输入你要查询的用户id" class="input-field" />
					</div>
					<div class="input-container">
						<label for="" class="label">你要查找的用户名:</label>
						<input type="text" name="请输入你要查找的用户名:" class="input-field" />
					</div>
					<div class="input-container">
						<label for="" class="label">你要查找的电话号:</label>
						<input type="number" name="请输入你要查找的电话号码" class="input-field" />
					</div>
					<div class="input-container">
						<label for="" class="label">你要查找的电子邮箱:</label>
						<input type="email" name="请输入你要查找的电子邮箱" class="input-field" />
					</div>
					<div class="button-container">
						<button type="submit" class="button"onclick="handleData()">查询全部</button>
					</div>
					<div class="button-container">
						<button type="submit" class="button"onclick="handleData()">根据用户ID查询</button>
					</div>
					<div class="button-container">
						<button type="submit" class="button"onclick="handleData()">根据用户名查询</button>
					</div>
					<div class="button-container">
						<button type="submit" class="button"onclick="handleData()">根据用户电话号码查询</button>
					</div>
					<div class="button-container">
						<button type="submit" class="button"onclick="handleData()">根据用户电子邮箱查询</button>
					</div>
					<div class="button-container">
						<button type="reset" class="button">重置</button>
					</div>
				</form>
			</span>
			<div class="selectTable">
				<h2>查询结果表</h2>
				<table border="1" class="table-container">
					<thead>
						<tr>
							<th>用户ID</th>
							<th>用户名</th>
							<th>电子邮箱</th>
							<th>手机电话号</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
		<div class="formDiv">
			<span class="formSpan">
				<h2>信息更改操作</h2>
				<form action="" method="post">
					<div class="input-container">
						<label for="" class="label">你要更改的用户id的数据:</label>
						<input type="number" name="请输入你要替换的用户id" class="input-field" />
					</div>
					<div class="input-container">
						<label for="" class="label">你要更改的用户名信息:</label>
						<input type="text" name="请输入你要更改的用户名:" class="input-field" />
					</div>
					<div class="input-container">
						<label for="" class="label">你要更改的电话号数值:</label>
						<input type="number" name="请输入你要更改的电话号码" class="input-field" />
					</div>
					<div class="input-container">
						<label for="" class="label">你要更改的电子邮箱信息:</label>
						<input type="email" name="请输入你要更改的电子邮箱" class="input-field" />
					</div>
					<div class="button-container">
						<button type="submit" class="button" onclick="handleData()">提交</button>
					</div>
					<div class="button-container">
						<button type="reset" class="button">重置</button>
					</div>
				</form>
			</span>
			<span class="formSpan">
				<h2>信息删除操作</h2>
				<form action="" method="post">
					<div class="input-container">
						<label for="" class="label">要删除的用户的id:</label>
						<input type="number" name="请输入你要删除用信息的id" class="input-field" />
					</div>
					<div class="button-container">
						<button type="submit" class="button" onclick="handleData()">清空全部</button>
					</div>
					<div class="button-container">
						<button type="submit" class="button" onclick="handleData()">按照用户ID删除信息</button>
					</div>
					<div class="button-container">
						<button type="reset" class="button">重置</button>
					</div>
				</form>
			</span>
		</div>
		<div class="formSpan">
			<h2>信息分页操作</h2>
			<form action="" method="post">
				<div class="input-container">
					<label for="" class="label">你要显示的信息页数:</label>
					<input type="number" name="请输入你要显示的信息页数" class="input-field" />
				</div>
				<div class="input-container">
					<label for="" class="label">你要显示每页信息条数:</label>
					<input type="text" name="请输入你要显示每页信息条数" class="input-field" />
				</div>
				<div class="button-container">
					<button type="submit" class="button" onclick="handleData()">提交</button>
				</div>
				<div class="button-container">
					<button type="reset" class="button">重置</button>
				</div>
			</form>
		</div>
		<script>
			function handleData(data) {
				var tableHtml = '<tr><td>' + data.id + '</td><td>' + data.username + '</td><td>' + data.email + '</td><td>' + data.phoneNumber + '</td></tr>';
				$('#data-table').append(tableHtml);
			}
		</script>
	</body>
</html>